<!--
 * @Author: your name
 * @Date: 2021-08-06 13:56:43
 * @LastEditTime: 2021-08-18 17:00:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \graduate-group-ui\src\views\components\Head.vue
-->
<template>
   <!-- 头部 -->
    <div class="header">
      <div class="header_top">
         <div class="logo" @click="toHomeHandler">
            <img src="/resources/images/logo.png" alt="">
          </div>
      </div>
      <div class="header_bottom">
        <ul class="menu">
        <li class="menu_item" v-for="c in categories" :key="c.id">
          <div @click="toListHandler(c)">{{ c.name }}</div>
          <ul class="sub_menu">
            <li
              v-for="sc in c.children"
              :key="sc.id"
              @click="toListHandler(sc)"
            >
              {{ sc.name }}
            </li>
          </ul>
        </li>
        </ul>
      </div>
    </div>
    <!-- /头部 -->
</template>
<script>
import { get } from '../../utils/request'
export default {
   data() {
      return {
       categories:[]
      }
    },
    methods:{
     toHomeHandler(){
      this.$router.push({path:'/home'})
    },
    toListHandler(categories){
      // 跳转
      this.$router.push({
        path:'/list',
        query:categories
      })
    },
    loadCategories(){
      let url = '/index/category/findCategoryTree'
      get(url).then(resp => {
        this.categories = resp.data;
      })
    }
    },
    created(){
    this.loadCategories();
  }
}
</script>
<style lang="scss" scoped>
.header{
  .header_top{
    background-image: linear-gradient(#11403a, #3a887f);
    height: 128px;
    .img{
      width: 417px;
      height: 70px;
    }
    .logo{
      padding-top: 29px;
      margin-left: 20px;
      position: relative;
      left: 5%;
    }
    .logo:hover{
        cursor: pointer;
    }
  }
  .header_bottom{
      height: 40px;
      background-color: #b39858;
      .menu{
        .menu_item{
          padding-top: 4px;
          padding-bottom: 4px;
          margin-top: 2px;
          float: left;
			    position: relative;
          z-index: 7;
			    text-align: center;
          color: white;
          font-size: 20px;
          width: 9%;
          left: 6%;
          // margin-top: 6px;
          border-right: 2px solid white;
          .sub_menu{
            position: absolute;
            display: none;
            width: 100%;
            padding-top: 10px;
            li{
              border-bottom: 1px solid white;
              padding-top: 6px;
              padding-bottom: 6px;
              background-color: #b39858;
            }
          }
        }
        .menu_item:hover{
          background-color: #8c6301;
          .sub_menu{
            display: block;
          }
          .sub_menu>li:hover{
            background-color: #8c6301;
          }
        }
        .menu_item:last-child{
          border-right: none;
        }
        .sub_menu>li:last-child{
          border-bottom: none;
        }
      }
  }
}
</style>